<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="shortcut icon" href="__IMG__/favicon.ico" />
		<link rel="bookmark" href="__IMG__/favicon.ico" type="image/x-icon" 　/>
		<title>游戏大厅</title>
		<link rel="stylesheet" type="text/css" href="__CSS__/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="__CSS__/common.css"/>
		<link rel="stylesheet" type="text/css" href="__CSS__/index.css"/>
		<script src="__JS__/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
	      	mui.init();
        </script>
		<style>
			.spring_lottery_list li {
				float: left;
				width: 15%;
				text-align: center;
				padding: 5px;
				margin: 0 2.5%;
				border: 1px solid #12C2FE;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">PC蛋蛋({$hall_name})</h1>
		    <a href="{:url('lottery/history',array('cate'=>1))}" class="right  blue mg_top10">开奖记录</a>
		    <!--<a href="service.html" class="right sever_box"><img class="width_100 mg_top5" src="__IMG__/icon_service.png" alt="" /></a>-->
		</header>
		<div class="mui-content">
            <div class="top_fix">
                <ul class="clearfix list_one_box">
                    <li>
                        <p class="color_ff">距离{$stage_data.stage_next}期截止</p>
                        <h4 class="color_ff">
                            <div class="colockbox" id="demo04">
                                <span class="minute">00</span>
                                <span class="second">00</span>
                                <input type="hidden" id="my_day" value="{$stage_data.dateline}">
                            </div>
                        </h4>
                    </li>
                    <li>
                        <p class="color_ff">余额</p>
                        <h4>
                            <span id="balance">{$stage_data['balance']}</span>元宝
                        </h4>
                    </li>
                </ul>
                <div class="padding_10 bor_b">
                    第<span class="blue">{$stage_data.stage}</span>期
                    <span class="blue padding_lr10" id="hall_box1_p">
                        {foreach $stage_data['number'] as $k=>$v}
                            {if $k==2}
                            <i>{$v}</i>=
                            {else/}
                            <i>{$v}</i>+
                            {/if}
                        {/foreach}
                        <i>{$stage_data['number_sum']}</i>
                        ({$stage_data['detail']})
                    </span>
                </div>
				<div class="hall_box1_all">
					{foreach $number as $k=>$v}
					<div class="padding_10 bor_b">
						第<span class="blue">{$v.stage}</span>期
						<span class="blue">
                        {foreach $v['number'] as $kk=>$vv}
                            {if $kk==2}
                            <i>{$vv}</i>=
                            {else/}
                            <i>{$vv}</i>+
                            {/if}
                        {/foreach}
                        <i>{$v['number_sum']}</i>
                        ({$v['detail']})
                    </span>
					</div>
					{/foreach}

				</div>
            </div>
                <div class="lottery_box1" style="margin-top: 108px;" id="content">
                    {if $room}
                        {foreach $room as $kkk=>$vvv }
                            <div class="lottery_comm padding_5">
                                <i><img src="{$vvv['head']}" style='border-radius: 50%'></i>
                                <div class="lottery_comm_boss1">
									<p>{$vvv['nickname']}({$vvv['time']})</p>
                                    <div class="lottery_bg">
                                        <div class="padding_5">
                                            <h4 class="color_ff ">{$vvv['play']}：{$vvv['number']}</h4>
                                            <h5 class="color_ff mg_top5"><i class="icon_money_box"><img src="__IMG__/icon_money.png" class="vertical-align_m width_100" alt="" /></i>{$vvv.money}元</h5>
                                            <p class="">第{$vvv['stage']}期</p>
                                            <input type="hidden"  id="time" value="{$vvv['time']}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {/foreach}
                    {/if}
                </div>
            </div>
		<div class="overlay"></div>
		<div class="footer_box">
			<div class="footer_lottery padding_5">
				<div class="clearfix padding_lr10">
					<div class="left mui-col-sm-8">
						<input type="number" value="" placeholder="请输入金额" class="betting_btn">
					</div>
					<div class="right mui-col-sm-4">
						<!--<a href="javascript:;"class="bg_red color_ff mg_top5 betting_btn1" style="padding: 5px 10px;border-radius:8px;" >投注</a>-->
						<input type="button" id="" value="投注" class="bg_red color_ff mg_top5 betting_btn1" style="border-radius: 15px;">
					    <a class="more_a1">...</a>
					</div>
				</div>
			</div>
			<nav class="mui-bar mui-bar-tab">
			    <a class="mui-tab-item1 " href="{:url('web/play_rule_web',array('cate'=>$cate))}">
			        <span class="mui-icon mui-active"><img class="width_100" src="__IMG__/icon_l1.png"/></span>
			        <span class="mui-tab-label">游戏说明</span>
			    </a>
			    <a class="mui-tab-item1 " href="{:url('web/odds_rule_web',array('cate'=>$cate,'hall'=>$hall))}">
			        <span class="mui-icon "><img class="width_100" src="__IMG__/icon_l2.png"/></span>
			        <span class="mui-tab-label">赔率说明</span>
			    </a>
			    <a class="mui-tab-item1" href="{:url('web/water_rule_web',array('cate'=>$cate,'hall'=>$hall))}">
			        <span class="mui-icon "><img class="width_100" src="__IMG__/icon_l3.png"/></span>
			        <span class="mui-tab-label">回水说明</span>
			    </a>
			    <a class="mui-tab-item1 " href="{:url('mine/transaction_record',array('cate'=>$cate))}" >
			        <span class="mui-icon"><img class="width_100" src="__IMG__/icon_l4.png"/></span>
			        <span class="mui-tab-label">中奖明细</span>
			    </a>
			</nav>
		</div>
		<div class="spring_lottery">
			<div class="spring_lottery_main">
				<ul class="spring_lottery_top clearfix padding_tb10">
					<li class="active"><a href="javascript:void(0);">双面盘</a></li>
					<li><a href="javascript:void(0);">幸运数字</a></li>
				</ul>
				<div class="spring_lottery_box active">
					<ul class="spring_lottery_list spring_a clearfix">
					{foreach $odds as $k=>$v}
					   {if $k!=3}
							<div class="spring_lottery_list_box">
								<!--<h4> 双面盘</h4>-->
								<!--<p>{$v['title']}</p>-->
								<!--<ul class="spring_lottery_list spring_a clearfix">-->
									{foreach $v['name'] as $kk=>$vv}
										<li >
											<a href="javascript:void(0);">
												<p>{$vv.rule}</p>
												<p>1:{$vv.rate}</p>
												<input type="hidden" value="{$vv.type}">
												<input type="hidden" value="{$v.title}">
											</a>
										</li>
									{/foreach}
								<!--</ul>-->
							</div>
					   {/if}
					{/foreach}
					</ul>
				</div>
				<div class="spring_lottery_box">
					{foreach $odds as $k=>$v}
					{if $k==3}
						<div class="spring_lottery_list_box">
							<p>{$v['title']}</p>

							<ul class="spring_lottery_list2 spring_a clearfix">
								{foreach $v['name'] as $kk=>$vv}
									   <li >
										<a href="javascript:void(0);">
											<p>{$vv.rule}</p>
											<p>1:{$vv.rate}</p>
											<input type="hidden" value="{$vv.type}">
											<input type="hidden" value="{$v.title}">
										</a>
									</li>
								{/foreach}
							</ul>
						</div>
					{/if}
					{/foreach}
			</div>
		    </div>
		    <div class="padding_10 spring_lottery_btn">
		    	投注金额：<input type="number" id="money" value="" />
				<a href="javascript:void(0);" onclick="betting()">投注</a>
				<a href="javascript:void(0);" onclick="zc()">重置</a>
				<input type="hidden"  id="hall" value="{$hall}">
				<input type="hidden"  id="stage" value="{$stage_data.stage_next}">
				<input type="hidden"  id="head" value="{$stage_data.head|default='__IMG__/user_head.png'}">
				<input type="hidden"  id="room_id" value="{$room_id}">
				<input type="hidden"  id="username" value="{$username}">
		    </div>
		</div>
		<script type='text/javascript' src='__JS__/webim.config.js'></script>
		<script type='text/javascript' src='__JS__/strophe-1.2.8.min.js'></script>
		<script type='text/javascript' src='__JS__/websdk-1.4.13.js'></script>
		<script src="__JS__/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="__JS__/index1.js" type="text/javascript" charset="utf-8"></script>
        <script src="__JS__/layer.js" ></script>
        <script src="__JS__/rooms.js" ></script>
		<script>
		$(function(){
            $("#hall_box1_p").click(function(){
                if($('.hall_box1_all').hasClass("active")){
                    $(".hall_box1_all").removeClass("active");
                }else {
                    $(".hall_box1_all").addClass("active")
                }
            });
			var my_day   = $('#my_day').val();
            var room_id  = $('#room_id').val();
            var username = $('#username').val();
			countDown(my_day,null,"#demo03 .hour","#demo04 .minute","#demo04 .second");
            hx_room(room_id,username);
		});
		function zc() {
            $('.spring_a li.active').removeClass("active");
        }
        function hx_room(room_id,username) {
            var conn = new WebIM.connection({
                isMultiLoginSessions: WebIM.config.isMultiLoginSessions,
                https: typeof WebIM.config.https === 'boolean' ? WebIM.config.https : location.protocol === 'https:',
                url: WebIM.config.xmppURL,
                heartBeatWait: WebIM.config.heartBeatWait,
                autoReconnectNumMax: WebIM.config.autoReconnectNumMax,
                autoReconnectInterval: WebIM.config.autoReconnectInterval,
                apiUrl: WebIM.config.apiURL,
                isAutoLogin: true
            });
            /*登录*/
            var options = {
                apiUrl: WebIM.config.apiURL,
                user: username,
                pwd: username,
                appKey: WebIM.config.appkey
            };
            conn.open(options);
            conn.listen({
                onOpened: function ( message ) {          //连接成功回调
                    conn.joinChatRoom({
                        roomId: room_id // 聊天室id
                    });
                },
                onClosed: function ( message ) {
                    console.log('连接关闭')
                },         //连接关闭回调
                onTextMessage: function ( message ) {
                    var data = message.ext.info;
                    data = $.parseJSON(data);
//                    console.log(data);
                    for(var i = 0; i < data.length; i++){
                        var show_betting = "<div class='lottery_comm padding_5'>"
                            + "<i><img style='border-radius: 50%' src=" + data[i].head + ">" + "</i>"
                            + "<div class='lottery_comm_boss1'>"
                            + "<p>" + data[i].nickname + "(" + data[i].time + ")</p>"
                            + "<div class='lottery_bg'>"
                            + "<div class='padding_5'>"
                            + "<h4 class='color_ff'>" + data[i].title + ":" + data[i].number + "</h4>"
                            + "<h5 class='color_ff mg_top5'>"
                            + "<i class='icon_money_box'><img src='__IMG__/icon_money.png' class='vertical-align_m width_100' alt=''>" + "</i>"
                            + data[i].money + "元" + "</h5>"
                            + "<p class=''>" + "第" + data[i].stage + "期" + "</p>"
                            + "</div>"
                            + "</div>"
                            + "</div>"
                            + "</div>";
                        $('.lottery_box1').append(show_betting);
                    }
                    $('#content').scrollTop( $('#content')[0].scrollHeight );

                },//收到文本消息
                onPresence: function ( message ) {
                    handlePresence(message);
                }

            });
            var handlePresence = function ( e ) {
                if(e.type === 'memberJoinChatRoomSuccess'){
                }
            };
        }
        function countDown(time,day_elem,hour_elem,minute_elem,second_elem) {
            time = time.replace(/\-/g, "/");
            var end_time = new Date(time).getTime(),//月份是实际月份-1
            sys_second =Math.floor((end_time - new Date().getTime()) / 1000);
            var open =1;
            var timer = setInterval(function () {
                if (sys_second > 0) {

                    sys_second -= 1;

                    var day = Math.floor((sys_second / 3600) / 24);

                    var hour = Math.floor((sys_second / 3600) % 24);

                    var minute = Math.floor((sys_second / 60) % 60);

                    var second = Math.floor(sys_second % 60);

                    day_elem && $(day_elem).text(day);//计算天

                    $(hour_elem).text(hour < 10 ? "0" + hour + ':' : hour + ':');//计算小时

                    $(minute_elem).text(minute < 10 ? "0" + minute + ':' : minute + ':');//计算分

                    $(second_elem).text(second < 10 ? "0" + second : second);// 计算秒

                } else {
                    if(open==1) {
                        var show_betting1 = "<div class='lottery_comm padding_10'>"
                            + "<div class='game_over'>"
                            + "<p class='color_55'>"
                            + "<span class='blue'>"
                            + "[{$stage_data.stage_next}期]"
                            + "</span>"
                            + "已封盘，下注结果以开奖结果为准，如有异议，请及时联系客服"
                            + "</p>"
                            + "</div>"
                            + "</div>";
                        $('.lottery_box1').append(show_betting1);
                        open = 0;
                    }
                    var timer1 = setInterval(function () {
                        if (sys_second <= 0) {
                            $(minute_elem).text('00');//计算分
                            $(second_elem).text('00');// 计算秒
                            location.reload();
                        } else {
                            clearInterval(timer1);
                        }
                    }, 10000);
                }
            }, 1000);
        }
		function betting() {
            var money  = $('#money').val();
            var stage  = $('#stage').val();
            var hall   = $('#hall').val();
            var minute =  parseInt($('.minute').text());
            var second =  parseInt($('.second').text());
            if(minute==0 && second==0){
                my_error('本期已经封盘');
                return false;
            }
            if(money==null ||money==""  ){
                my_error('请输入投注金额');
                return false;
            }
            if(money<=0){
                my_error('投注金额超出范围');
                return false;
            }
            var is_chooose = $('.spring_a li.active').length;
            if(is_chooose==0){
                my_error('请选择投注选项');
                return false
			}
            var number_arr=[];
            $('.spring_a li.active').each(function () {
                var type   = $(this).find('input:eq(0)').val();
                var play   = $(this).find('input:eq(1)').val();
                var number = $(this).find('p:eq(0)').html();
                var list = {};
                list['type']   = type;
                list['number'] = number;
                list['play']   = play;
                list['money']  = money;
                number_arr.push(list);
            });
            var list1 = JSON.stringify(number_arr);
			$.ajax({
				type: "post",
				url: "{:url('game/betting')}",
				data: {'cate':1,'stage':stage,'hall':hall,'list':list1},
				dataType: "json",
				async: false,
				success: function(data) {
					var ret   = data.ret;
                    var info  = data.msg;
                    var blance = data.data.money;
					if(ret=='200'){
                        $('#balance').html(blance);
                        zc();
                        my_error(info);
					}else{
                        my_error(info);
					}
				}
			});

        }
		</script>
	</body>
</html>
